<template>
  <div id="login">
    <!-- 头部导航 -->
    <div class="top">
      <div class="concent">
        <span class="one">空间天气</span>
        <span class="two">模型转化</span>
        <span class="three">V1.0</span>
      </div>
      <div class="page_icon">
        <i class="el-icon-news"></i>
        <i class="el-icon-menu"></i>
        <i class="el-icon-document"></i>
      </div>
      <div class="linkage">
        <div class="content-box">
          <div class="nav" ref="nav">
            <div
              @click="fnNav(index, $event)"
              v-for="(item, index) in btnList"
              :key="item.id"
              :class="now == index ? 'nav-list ac' : 'nav-list'"
            >
             <p> {{ item.val }}</p>
            </div>
          </div>
          <div class="content" ref="content" @scroll="contentScroll">
            <div
              class="content-list"
              v-for="(cont, index) in contList"
              :key="index"
            >
              <div class="menu_middle_top">
                <span>{{ cont.val }}</span>
                <el-button type="primary" round>查看</el-button>
              </div>
              <div class="menu_middle_por">
                <p>
                  <span>联系人</span>
                  <span>联系方式</span>
                </p>
                <p>
                  <span>{{ cont.peo }}</span>
                  <span>{{ cont.tell }}</span>
                </p>
              </div>
              <div class="menu_middle_text">
                <p class="one">
                  日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论
                </p>
                <p class="two">
                  日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论日冕行星际理论
                </p>
              </div>
            </div>
          </div>
          <div class="menu_right">
            <img :src="require('@/assets/image/图片-12.png')" alt="" />
          </div>
        </div>
      </div>
      <div class="page_login">
        <i class="el-icon-menu"></i>
        <span class="log">xxx登录</span>
      </div>
    </div>
    <!-- 头部导航结束 -->

    <!-- 左侧userinformation面板 -->
    <div class="register">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <div class="login_user">
          <p class="user">&nbsp;&nbsp;User information</p>
          <div class="lab">
            <el-form-item label="First Name" prop="first">
              <el-input v-model="ruleForm.first"></el-input>
            </el-form-item>
            <el-form-item label="Middle Name" prop="middle">
              <el-input v-model="ruleForm.middle"></el-input>
            </el-form-item>
            <el-form-item label="Last Name" prop="last">
              <el-input v-model="ruleForm.last"></el-input>
            </el-form-item>
            <el-form-item prop="email" label="E-mail">
              <el-input v-model="ruleForm.email"></el-input>
            </el-form-item>
          </div>
        </div>
        <div class="login_country">
          <p class="user">&nbsp;&nbsp;Country information</p>
          <div class="coun">
            <el-form-item label="Country" prop="country">
              <el-select v-model="ruleForm.country" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="login_Affiliations">
          <p class="user">&nbsp;&nbsp;Affiliations</p>
          <div class="aff">
            <el-form-item label="Affiliatiions" prop="affiliatiions">
              <el-select v-model="ruleForm.affiliatiions" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="User Type" prop="user">
              <el-select v-model="ruleForm.user" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
        </div>
        <div class="sub">
          <el-form-item>
            <el-button type="success" @click="submitForm('ruleForm')"
              >提交</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <!-- 左侧结束 -->

    <!-- 模式运行按钮 -->
    <div class="login_module">
      <el-button
        type="primary"
        round
        class="el-icon-caret-right"
        @click="enter()"
        >模式运行</el-button
      >
    </div>
    <div class="loa">
      <div class="loa_icon">
        <i class="el-icon-news"></i>
      </div>
      <div class="loa_form">
        <el-form
          :model="ruleForm2"
          status-icon
          ref="ruleForm2"
          class="demo-ruleForm"
        >
          <el-form-item label="UserName" prop="name">
            <el-input
              type="text"
              v-model="ruleForm2.name"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="Password" prop="password">
            <el-input
              type="password"
              v-model="ruleForm2.password"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <div class="tip">
            <!-- 记住我 -->
            <el-checkbox v-model="checked" class="rememberMe"
              >Stay signed in(this is a private workstation)</el-checkbox
            >
          </div>
          <div class="sub">
            <el-form-item>
              <el-button type="success" @click="submitForm1(ruleForm2)"
                >LOG IN</el-button
              >
              <el-button @click="resetForm1('ruleForm2')">REGISTER</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <div class="loa_bottom">
        <ul>
          <li>
            <i class="el-icon-question">I don't remember my username</i>
          </li>
          <li>
            <i class="el-icon-question">I don't remember my password</i>
          </li>
          <li>
            <i class="el-icon-question">Help</i>
          </li>
        </ul>
      </div>
    </div>
    <div class="pro" v-show="menu_show">
      <div class="loa_icon">
        <i class="el-icon-news"></i>
        <span class="pro_x" @click="messHandler">x</span>
      </div>
      <p class="pro_why">为什么要登录?</p>
      <p class="pro_text">
        为了会计，安全，数据收集和资源管理，用户通常需要一个密码或其它证明以登录账户
      </p>
    </div>
  </div>
</template>

<script>
import { Login } from "../../service/index";
export default {
  data() {
    return {
      now: 0,
      listBoxState: true, //点击导航栏时，暂时停止监听页面滚动
      btnList: [
        {
          id: "btn0",
          val: "日冕行星际理论",
        },
        {
          id: "btn1",
          val: "行星际激波计算",
        },
        {
          id: "btn2",
          val: "磁层顶模式",
        },
        {
          id: "btn3",
          val: "磁暴强度经验",
        },
        {
          id: "btn4",
          val: "磁层状态模式",
        },
        {
          id: "btn5",
          val: "开放磁通估算",
        },
        {
          id: "btn6",
          val: "弓激波模式",
        },
        {
          id: "btn7",
          val: "极尖区模式",
        },
        {
          id: "btn8",
          val: "等离子体密度反演",
        },
        {
          id: "btn9",
          val: "GIC 预测模式",
        },
        {
          id: "btn10",
          val: "磁尾扭转模式",
        },
        {
          id: "btn11",
          val: "中低纬电离层理论",
        },
        {
          id: "btn12",
          val: "局地中高层大气预报",
        },
        {
          id: "btn13",
          val: "临近空间大气环境数据同化预报",
        },
      ],
      contList: [
        {
          id: "cont0",
          val: "日冕行星际理论",
          peo: "wang",
          tell: "11111111",
          text: "读书对数",
        },
        {
          id: "cont1",
          val: "行星际激波计算",
          peo: "wang",
          tell: "2222",
          text: "读书对数",
        },
        {
          id: "cont2",
          val: "磁层顶模式",
          peo: "wang",
          tell: "33333",
          text: "读书对数",
        },
        {
          id: "cont3",
          val: "磁暴强度经验",
          peo: "wang",
          tell: "44444",
          text: "读书对数",
        },
        {
          id: "cont4",
          val: "磁层状态模式",
          peo: "wang",
          tell: "55555",
          text: "读书对数",
        },
        {
          id: "cont5",
          val: "开放磁通估算",
          peo: "wang",
          tell: "66666",
          text: "读书对数",
        },
        {
          id: "cont6",
          val: "弓激波模式",
          peo: "wang",
          tell: "77777",
          text: "读书对数",
        },
        {
          id: "cont7",
          val: "极尖区模式",
          peo: "wang",
          tell: "888888",
          text: "读书对数",
        },
        {
          id: "cont8",
          val: "等离子体密度反演",
          peo: "wang",
          tell: "99999",
          text: "读书对数",
        },
        {
          id: "cont9",
         val: "GIC 预测模式",
          peo: "wang",
          tell: "101010",
          text: "读书对数",
        },
        {
          id: "cont10",
           val: "磁尾扭转模式",
          peo: "wang",
          tell: "11",
          text: "读书对数",
        }, {
          id: "cont11",
           val: "中低纬电离层理论",
          peo: "wang",
          tell: "12",
          text: "读书对数",
        }, {
          id: "cont12",
           val: "局地中高层大气预报",
          peo: "wang",
          tell: "13",
          text: "读书对数",
        },{
          id: "cont13",
           val: "临近空间大气环境数据同化预报",
          peo: "wang",
          tell: "14",
          text: "读书对数",
        },
      ],
      //menu的显示与隐藏
      menu_show: true,
      checked: false,
      // 下拉菜单选择框
      options: [
        {
          value: "1",
          label: "中国",
        },
        {
          value: "2",
          label: "香港",
        },
        {
          value: "3",
          label: "澳大利亚",
        },
        {
          value: "4",
          label: "法国",
        },
      ],
      // 左侧form表单元素
      ruleForm: {
        first: "",
        middle: "",
        last: "",
        email: "",
        country: "",
        affiliations: "",
        user: "",
      },
      ruleForm2: {
        name: "",
        password: "",
      },
      // 左侧验证规则
      rules: {
        first: [
          { required: true, message: "请输入First Name", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        last: [
          { required: true, message: "请输入Last Name", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        email: [
          { required: true, message: "请输入邮箱地址", trigger: "blur" },
          {
            type: "email",
            message: "请输入正确的邮箱地址",
            trigger: "blur,change",
          },
        ],
        country: [
          {
            required: true,
            message: "请选择国家",
            trigger: "blur,change",
          },
        ],
        affiliatiions: [
          {
            required: true,
            message: "请选择",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.getCookie();
    window.addEventListener("scroll", this.documentScroll);
    this.NList = this.$refs["nav"].children;
    // 内容区域子元素
    this.CList = this.$refs["content"].children;
    //  循环内容区子元素,并设置随机高度
    for (var i = 0; i < this.CList.length; i++) {
      this.CList[i].style.height = this.getRandom(300, 300) + "px";
    }
  },
  methods: {
    fnNav(index, ev) {
      // 点击时不触发右边滚动监听
      this.listBoxState = false;
      // 把index赋值给now
      this.now = index;
      // 导航条
      this.Nav = this.$refs["nav"];
      // 导航条子元素
      this.NList = this.Nav.children;
      // 内容区域
      this.Content = this.$refs["content"];
      // 内容区域子元素
      this.CList = this.Content.children;
      // 内容区父元素
      this.Parent = this.Content.parentNode;
      // 判断导航条位置是否该调整
      if (this.now <= 3) {
        this.$refs["nav"].scrollTop -= 500;
      }
      if (this.now >= this.NList.length - 3) {
        this.$refs["nav"].scrollTop += 500;
      }
      // 内容区滚动的高度=子元素可视区距离顶部高度
      this.Content.scrollTop = this.CList[index].offsetTop;
      // 去除默认事件
      ev.preventDefault = ev.preventDefault();
    },
    contentScroll() {
      // 内容区域滚动高度
      this.scrollTop = this.$refs["content"].scrollTop;
      //  内容区子元素
      this.CList = this.$refs["content"].children;
      if (this.listBoxState) {
        //  循环内容区子元素
        for (var i = 0; i < this.CList.length; i++) {
          //  判断内容区域滚动高度大于当前子元素距离顶部高度就将当前值i赋给now
          if (this.scrollTop >= this.CList[i].offsetTop) {
            this.now = i;
          }
        }
        // 判断导航条位置是否该调整
        if (this.now <= 3) {
          this.$refs["nav"].scrollTop -= 500;
        }
        if (this.now >= this.NList.length - 3) {
          this.$refs["nav"].scrollTop += 500;
        }
      }
      // 打开左右联动
      if (this.scrollTop == this.CList[this.now].offsetTop) {
        this.listBoxState = true;
      }
    },
    messHandler() {
      this.menu_show = false;
    },
    // 左侧提交与重置
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 左侧重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 模式运行按钮
    enter() {
      this.$router.push({
        path: "/start",
      });
    },

    resetForm1(formName) {
      this.$refs[formName].resetFields();
    },
    async submitForm1(formName) {
      Login(formName).then((res) => {
        if (res.data.code == 0) {
          sessionStorage.setItem("Authorization", res.data.data.access_token);
          this.$message(res.data.msg);
          this.$router.push({
            path: "/page",
          });
        } else {
          this.$message(res.data.msg);
        }
      });
      // 判断是否需要记住密码
      if (this.checked === true) {
        // 传入账号名，密码，和保存天数3个参数
        this.setCookie(this.ruleForm2.name, this.ruleForm2.password, 7);
        console.log(this.ruleForm2.name, this.ruleForm2.password);
      } else {
        // 清空Cookie
        this.clearCookie();
      }
    },
    // 设置cookie
    setCookie(name, pwd, exdays) {
      var now = new Date(); // 获取时间
      now.setTime(now.getTime() + 24 * 60 * 60 * 1000 * exdays); // 保存的天数
      // 字符串拼接cookie' ;toGMTString() 方法可根据格林威治时间 (GMT) 把 Date 对象转换为字符串，并返回结果
      window.document.cookie =
        "userName" + "=" + name + ";time=" + now.toGMTString();
      window.document.cookie =
        "userPwd" + "=" + pwd + ";time=" + now.toGMTString();
    },
    // 读取cookie
    getCookie: function () {
      if (document.cookie.length > 0) {
        var arr = document.cookie.split("; "); // 这里显示的格式需要切割一下自己可输出看下
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split("="); // 再次切割
          // 判断查找相对应的值
          if (arr2[0] === "userName") {
            this.ruleForm2.name = arr2[1]; // 保存到保存数据的地方
          } else if (arr2[0] === "userPwd") {
            this.ruleForm2.password = arr2[1];
          }
        }
      }
    },
    clearCookie: function () {
      this.setCookie("", "", -1); // 修改2值都为空，天数为负1天就好了
    },
  },
};
</script>

<style scoped lang="scss">
#login {
  width: 100%;
  height: 960px;
  background-image: url("@/assets/image/page.jpg");
  background-size: 100% 100%;
  .top {
    width: 100%;
    height: 80px;
    background-color: #2c3449;
    .concent {
      float: left;
      margin-top: 26px;
      margin-left: 100px;
      font-size: 18px;
      font-weight: 600;
      .one {
        color: #ffffff;
        letter-spacing: 10px;
      }
      .two {
        color: #27aae1;
        letter-spacing: 10px;
      }
      .three {
        margin-left: 20px;
        color: #27aae1;
      }
    }
    .page_icon {
      float: right;
      width: 200px;
      height: 78px;
      margin-top: 23px;
      margin-right: 350px;
      font-size: 30px;
      font-weight: 600;
      color: #27aae1;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      position: relative;
    }
    .page_login {
      float: right;
      margin-top: 23px;
      width: 200px;
      height: 78px;
      margin-right: -500px;
      font-size: 30px;
      font-weight: 600;
      color: #27aae1;
      display: flex;
      justify-content: space-between;
      .log {
        font-size: 20px;
        margin-right: 80px;
      }
    }
  }
  .content-box {
    width: 51%;
    height: 350px;
    position: absolute;
    top: 80px;
    right: 0px;
    background-color: #ffff;
    .nav {
      height: 300px;
      float: left;
      width: 32%;
      overflow-y: auto;
      .nav-list {
        display: flex;
        align-items: center;
        min-height: 10vh;
        width: 200px;
        text-align: center;
        box-sizing: border-box;
        padding: 20px;
        font-size: 18px;
        margin-left: 20%;
        height: 56px;
      }
      .nav-list.ac {
        background: #1c75bc;
      }
      .nav-list:hover {
        background-color: #d1d3d4;
      }
    }
    .content {
      height: 300px;
      width: 44%;
      float: left;
      overflow-y: auto;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch; /* 解决ios滑动不流畅问题 */
      transition: 0.3s ease-in all;
      .content-list {
        height: 300px;
        font-size: 16px;
        text-align: center;
        transition: 0.3s ease-in all;
      }
      .menu_middle_top {
        margin-top: 30px;
        margin-left: 10px;
        span {
          font-size: 24px;
          color: #161c34;
        }
        .el-button {
          margin-left: 80px;
        }
      }
      .menu_middle_por {
        width: 200px;
        display: flex;
        // flex-direction: column;
        justify-content: space-between;
        span {
          display: inline-block;
          margin-left: 10px;
          color: #1561a0;
          font-size: 14px;
          margin-top: 5px;
        }
      }
      .menu_middle_text {
        margin-left: 10px;
        .one {
          font-size: 14px;
          color: #161c34;
          margin-top: 10px;
        }
        .two {
          font-size: 14px;
          color: #161c34;
          margin-top: 10px;
        }
      }
    }
    .menu_right {
      width: 8%;
      height: 320px;
      float: left;
      margin-top: 13px;
      margin-left: 21px;
      img {
        width: 200px;
        height: 320px;
      }
    }
  }
  .content::-webkit-scrollbar {
    display: none;
  }
}
.register {
  margin-top: 100px;
  margin-left: 50px;
  width: 720px;
  height: 600px;
  opacity: 80%;
  background-color: #2c3449;
  overflow: hidden;
  float: left;
  .user {
    height: 30px;
    background-color: #2f7bba;
    margin: 30px;
    color: #ffffff;
    line-height: 30px;
  }
  .login_user {
    height: 25%;
    .lab {
      width: 600px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-left: 60px;
      margin-top: -28px;
    }
  }
  .login_country {
    height: 25%;
    .coun {
      width: 600px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-left: 60px;
      margin-top: -28px;
    }
  }
  .login_Affiliations {
    height: 25%;
    .aff {
      width: 600px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-left: 60px;
      margin-top: -28px;
    }
  }
  ::v-deep .el-input__inner {
    width: 280px;
    height: 30px;
    opacity: 80%;
    color: white;
    background-color: #495466;
    border: 1px solid #2c3449;
  }
  ::v-deep .el-form-item {
    margin-bottom: 5px;
  }
  ::v-deep .el-form-item__label {
    color: #ffffff;
  }
  .sub {
    margin-top: 18px;
    margin-left: 40%;
  }
}
.login_module {
  width: 200px;
  height: 50px;
  margin-left: 85px;
  margin-top: 5%;
  ::v-deep .el-button {
    width: 200px;
    height: 50px;
    font-size: 20px;
    background: #2c3449;
    border: 1px solid #2c3449;
    margin-top: 104px;
  }
}
::-webkit-scrollbar {
  width: 10px;
  height: 8px;
  background-color: #3b465b;
}
::v-deep .el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: hidden;
}
::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #a7a9ac;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  background: #3b465b;
}
.loa {
  float: right;
  width: 360px;
  height: 450px;
  opacity: 80%;
  background-color: #2c3449;
  margin-top: 250px;
  margin-right: 470px;
  overflow: hidden;
  .loa_icon {
    margin-top: 30px;
    margin-left: 42%;
    font-size: 50px;
    color: #27aae1;
  }
  .loa_form {
    margin-left: 30px;
  }
  ::v-deep .el-input__inner {
    width: 280px;
    height: 30px;
    opacity: 80%;
    color: white;
    background-color: #495466;
    border: 1px solid #2c3449;
  }
  ::v-deep .el-form-item {
    margin-bottom: 5px;
  }
  ::v-deep .el-form-item__label {
    color: #ffffff;
  }
  .sub {
    margin-top: 25px;
    margin-left: 44px;
  }
  .loa_bottom {
    margin-left: 48px;
    margin-top: 14px;
    ul {
      li {
        font-size: 12px;
        color: #8695a5;
      }
    }
  }
}
.pro {
  float: right;
  width: 360px;
  height: 450px;
  opacity: 80%;
  background-color: #2f7bba;
  margin-right: -720px;
  margin-top: 250px;
  position: relative;
  .loa_icon {
    margin-top: 30px;
    margin-left: 42%;
    font-size: 50px;
    color: #27aae1;
    .pro_x {
      position: absolute;
      top: 9px;
      left: 86%;
      display: inline-block;
      width: 20px;
      height: 20px;
      font-size: 24px;
      background-color: #161c34;
      text-align: center;
      line-height: 20px;
    }
  }
  .pro_why {
    margin-top: 40px;
    width: 200px;
    height: 40px;
    color: #ffff;
    border: 2px solid #ffff;
    border-radius: 2px solid #ffff;
    margin-left: 25%;
    text-align: center;
    line-height: 40px;
  }
  .pro_text {
    width: 200px;
    margin-top: 50px;
    margin-left: 25%;
    color: white;
  }
}
</style>